<template>
	<!-- 预约页面 -->
	<!-- 返回语搜索 -->
	<my-Back-search  :yesSearch='false'>
		<template #back>
			<uni-icons @click="onBack" type="back" size="28" color="#ff0000"></uni-icons>
		</template>
		<template #time>
			<view>即将上线</view>
		</template>
		<template #search>
			
		</template>
	</my-Back-search>

	<!-- 筛选 -->
	<view class="nav">
		<view>共 {{total}} 部</view>
		<view class="nav-time">
			<view :class="[curIndex == 0 ? 'active' : '', 'time1']" @click="OnTimeNav" data-index="0">推荐</view>
			<view :class="[curIndex == 1 ? 'active' : '', 'time2']" @click="OnTimeNav" data-index="1">时间</view>

		</view>
	</view>
	<view style="height: 80rpx;"></view>

	<!-- 内容 -->
	<scroll-view scroll-y class="swiper-topic-list" @scrolltolower="onBottumLoading">
		<view class="content" v-for="item in scrollTitle">
			<view class="content-com">
				<!-- 上线日期 -->
				<view class="content-time">
					<view>{{item.releaseDate}}</view>
					<view style="margin-left: 10rpx;">上线</view>
				</view>
				<!-- 主要内容 -->
				<view class="content-title">
					<!-- 内容图片 -->
					<view class="title-img">
						<image style="width: 100%; height: 100%;" :src="item.imageUrl"></image>
					</view>
					<!-- 内容标题语追加按钮 -->
					<view class="title-bottom">
						<view>{{item.name}}</view>
						<view @click="onUcsSvg">
							<ucs-svg src='<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 24 24">
							<g fill="none" stroke="#ff0000" stroke-linecap="round" stroke-width="2" data-swindex="0">
								<g>
									<path stroke-dasharray="4" stroke-dashoffset="4" d="M12 3V5">
										<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="4;0"></animate>
									</path>
									<path stroke-dasharray="28" stroke-dashoffset="28"
										d="M12 5C8.68629 5 6 7.68629 6 11L6 17C5 17 4 18 4 19H12M12 5C15.3137 5 18 7.68629 18 11L18 17C19 17 20 18 20 19H12">
										<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.4s" values="28;0">
										</animate>
									</path>
									<animateTransform attributeName="transform" begin="0.8s" dur="6s" keyTimes="0;0.05;0.15;0.2;1"
										repeatCount="indefinite" type="rotate" values="0 12 3;3 12 3;-3 12 3;0 12 3;0 12 3">
									</animateTransform>
								</g>
								<path stroke-dasharray="8" stroke-dashoffset="8"
									d="M10 20C10 21.1046 10.8954 22 12 22C13.1046 22 14 21.1046 14 20">
									<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.6s" dur="0.2s" values="8;0"></animate>
									<animateTransform attributeName="transform" begin="1s" dur="6s" keyTimes="0;0.05;0.15;0.2;1"
										repeatCount="indefinite" type="rotate" values="0 12 8;6 12 8;-6 12 8;0 12 8;0 12 8">
									</animateTransform>
								</path>
							</g>
						</svg>'></ucs-svg>
						</view>
					</view>
					<view class="title-sort">
						<view style="padding-right:10rpx;">{{item.yurts.name}}</view>
						<view>|</view>
						<!-- 标签 -->
						<view class="title-tags">
							<view style="padding: 0 10rpx;" v-for="tag in item.tags">{{tag.name}}</view>
						</view>
					</view>
					<!-- 国籍 -->

					<!-- 简介 -->
					<view class="title-content">{{item.content}}
					</view>
				</view>
			</view>
		</view>
	</scroll-view>


</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		reservation
	} from '@/API/reservationApis.js';

	const curIndex = ref(0); // 排序循序参数
	const total = ref(0);
	const nextPage = ref(1);

	const scrollTitle = ref([]); //获取的内容

	// 获取数据
	const reservationFunction = async (nextPagee, pageSize, order) => {
		let res = await reservation(nextPagee, pageSize, order);
		scrollTitle.value = scrollTitle.value.concat(res.data.list);
		total.value = res.data.total;
		nextPage.value = res.data.nextPage;
		console.log("即将：", res.data.nextPage);

	}
	// 即将上线
	reservationFunction(nextPage.value, 9, curIndex.value);

	// 排序循序函数
	function OnTimeNav(e) {
		console.log(e.currentTarget.dataset.index);
		curIndex.value = e.currentTarget.dataset.index;
		console.log("排序：", e.currentTarget.dataset.index)
		nextPage.value = 1;
		scrollTitle.value = [];
		reservationFunction(nextPage.value, 9, curIndex.value);
	}

	// 推荐页面触底函数
	function onBottumLoading() {
		console.log("nextPage:", nextPage.value);
		if (nextPage.value > 0) {
			console.log("触底了")
			reservationFunction(nextPage.value, 9, curIndex.value);
		}

	}

	// 返回按钮
	function onBack() {
		uni.navigateBack({
			delta: 1 // 返回上一个页面
		});
	}
 
 function onUcsSvg(){
	 uni.showToast({
	 	title:"上线会通知您！",
		icon:'none'
	 })
 }
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";

	.nav {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		background: #000;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		color: $App-min-text-color;
		padding-bottom: 10rpx;

		.nav-time {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.time1 {
				font-size: 20rpx;
				border-top-left-radius: 30rpx;
				border-bottom-left-radius: 30rpx;
				background-color: $App-max-text-color;
				padding: 8rpx 15rpx;
			}

			.time2 {
				font-size: 20rpx;
				border-top-right-radius: 30rpx;
				border-bottom-right-radius: 30rpx;
				background-color: $App-max-text-color;
				padding: 8rpx 15rpx;
			}

			.active {
				// background-color: #ff0000;
				background-color: rgba(254, 0, 0, 0.3);
				color: #ff0000;
				padding: 12rpx 15rpx;

			}
		}
	}

	.swiper-topic-list {
		width: 100%;
		height: 90vh;

		.content {
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			padding-top: 0;

			.content-time {
				display: flex;
				padding: 10rpx 20rpx;
				font-weight: bold;
				align-items: center;

			}

			.content-title {
				padding-bottom: 20rpx;
				width: 100%;
				background-color: #1d1d1d;
				border-radius: 20rpx;
				box-shadow: inset 0 -4px 10px rgba(255, 255, 255, 0.1);

				.title-img {
					padding-bottom: 15rpx;
					width: 100%;
					height: 400rpx;
					border-radius: 20rpx;
					overflow: hidden;
				}

				.title-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx;

				}

				.title-sort {
					padding: 0 20rpx;
					display: flex;
					color: #969696;
					font-size: 22rpx;

					.title-tags {
						display: flex;
					}
				}

				.title-content {
					padding: 20rpx 20rpx;
					padding-bottom: 0;
					font-size: 22rpx;
					color: #969696;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
</style>